<template>
  <div style="padding: 10px;">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :layout="'->,total, prev, pager, next, jumper'"
        :page-sizes="pageSizes"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :small="true"
    />
  </div>
</template>
<script>
import {ref,computed} from 'vue'
const {ElPagination} = ElementPlus;
export default {
  name: "Pagination",
  components: {ElPagination},
  props:{
    total:{type:Number,default:1},
    page:{type:Number,default:1},
    size:{type:Number,default:20},
    pageSizes: {
      type: Array,
      default: () => [20, 50, 100]
    }
  },
  setup(props,context) {
    const currentPage = computed({
      get() {
        return props.page
      },
      set(val) {
        context.emit('update:page', val)
      }
    })
    const pageSize = computed({
      get() {
        return props.size
      },
      set(val){
        context.emit('update:size', val)
      }
    })
    const handleSizeChange =(val)=>{

      if (currentPage.value * val > props.total) {
        currentPage.value = 1
      }
      context.emit('pagination', { pageNum: currentPage.value, pageSize: val })
    }
    const handleCurrentChange =(val)=>{
      context.emit('pagination', { pageNum: currentPage.value, pageSize: val })
    }
    return {currentPage,pageSize,handleSizeChange,handleCurrentChange}
  }
}
</script>

<style scoped>

</style>